<template>
    <el-collapse>
        <el-collapse-item>
            <template #title>
                <span style="font:400 14px 微软雅黑;padding-left: 20px;">
                    {{ title }}
                </span>
            </template>

            <el-form style="margin: 10px 30px 0 20px;" @submit.prevent="filter">

                <el-form-item label="类型筛选：">
                    <span v-if="types.length === 0">{{ "类型列表为空" }}</span>
                    <el-checkbox-group v-model="filterTypes" >
                        <el-space wrap :size="25" style="margin-right: 20px;">
                            <el-checkbox v-for="item in types" :value="itemValue(item)" border>
                                {{ item.name }}
                            </el-checkbox>
                        </el-space>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item>
                    <div style="width: 100%;display: flex;flex-direction: row-reverse;">
                        <el-button type="primary" native-type="submit">重新搜索</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-collapse-item>
    </el-collapse>
</template>

<script setup lang="ts">
import { ref } from "vue";

defineProps({
    title: {
        type: String,
        default: '高级筛选',
    },
    types: {
        type: Array as () => any[],
        required: true,
    },
    itemValue: {
        type: Function,
        required: true,
    },

})

const filterTypes = ref<Number[]>([]);
const emit = defineEmits([
    'filter'
])
const filter = () => {
    emit('filter', filterTypes.value);
}
</script>